"use client";

/**
 * /w/:workspace/settings/members — full member management (the core sidebar
 * deep-links here).
 *
 *   - Invite by email        → POST  /workspaces/:id/members/invites { email, role }
 *   - Change a role          → PATCH /workspaces/:id/members/:userId { role }
 *   - Remove a member        → DELETE /workspaces/:id/members/:userId
 *
 * All operations go through hooks/use-members.ts (single shared implementation,
 * UPPERCASE wire roles — see that file's header for the core-casing conflict).
 * Only owner/admin reach this surface (server-side enforcement is authoritative).
 */
import { useState } from "react";
import { useParams } from "next/navigation";
import { Loader2, Mail, Trash2 } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { useAuth } from "@/hooks/use-auth";
import { useWorkspace, useWorkspaceMembers } from "@/hooks/use-workspace";
import { useInviteMember, useRemoveMember, useUpdateMemberRole, ASSIGNABLE_ROLES, roleLabel } from "@/hooks/use-members";
import { WorkspaceMember } from "@/lib/types";
import { SettingsShell, Section, inputCls } from "@/components/settings/settings-shell";
import { UserAvatar } from "@/components/database/cell-renderer";

export default function SettingsMembersPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: ws, isLoading } = useWorkspace(slugOrId);
  const members = useWorkspaceMembers(ws?.id ?? "");
  const updateRole = useUpdateMemberRole({ workspaceId: ws?.id ?? "" });
  const remove = useRemoveMember({ workspaceId: ws?.id ?? "" });

  const { user } = useAuth();
  const [email, setEmail] = useState("");
  const [inviteRole, setInviteRole] = useState<string>("MEMBER");
  const invite = useInviteMember({ workspaceId: ws?.id ?? "" });

  const role = (ws?.role ?? "").toLowerCase();
  const canManage = role === "owner" || role === "admin";
  const isOwner = role === "owner";

  const submitInvite = () => {
    if (!email.trim()) return;
    invite.mutate(
      { email: email.trim(), role: inviteRole as (typeof ASSIGNABLE_ROLES)[number] },
      {
        onSuccess: () => {
          toast("success", "Invitation sent", email.trim());
          setEmail("");
        },
        onError: (e) => toast("error", "Invite failed", (e as Error).message)
      }
    );
  };

  const changeRole = (userId: string, next: string) => {
    updateRole.mutate(
      { userId, role: next as (typeof ASSIGNABLE_ROLES)[number] },
      {
        onSuccess: () => toast("success", "Role updated"),
        onError: (e) => toast("error", "Role change failed", (e as Error).message)
      }
    );
  };

  const removeMember = (m: WorkspaceMember) => {
    if (!window.confirm(`Remove ${m.user.name} from this workspace?`)) return;
    remove.mutate(m.userId, {
      onSuccess: () => toast("success", "Member removed"),
      onError: (e) => toast("error", "Remove failed", (e as Error).message)
    });
  };

  return (
    <SettingsShell title="Members" description={ws ? `${ws.name} · ${ws.memberCount} members` : "Manage who can access this workspace."} active="members">
      {isLoading || !ws ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <div className="space-y-5">
          {/* invite */}
          {canManage && (
            <Section title="Invite">
              <div className="flex items-center gap-1.5">
                <input
                  type="email"
                  className={`min-w-0 flex-1 ${inputCls}`}
                  placeholder="name@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && submitInvite()}
                />
                <select className={`rounded-md border border-input bg-background px-1.5 py-1.5 text-sm outline-none`} value={inviteRole} onChange={(e) => setInviteRole(e.target.value)} aria-label="Role">
                  {ASSIGNABLE_ROLES.map((r) => (
                    <option key={r} value={r}>
                      {roleLabel(r)}
                    </option>
                  ))}
                </select>
                <button
                  type="button"
                  className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
                  disabled={!email.trim() || invite.isPending}
                  onClick={submitInvite}
                >
                  {invite.isPending ? <Loader2 className="size-3.5 animate-spin" /> : <Mail className="size-3.5" />}
                  Invite
                </button>
              </div>
              <p className="mt-1 text-[11px] text-muted-foreground">
                Invitations are emailed to the person. They become a member when they accept.
              </p>
            </Section>
          )}

          {/* members list */}
          <Section title={`Members (${members.data?.length ?? 0})`}>
            {members.isLoading && <p className="text-sm text-muted-foreground">Loading…</p>}
            <ul className="divide-y divide-border">
              {(members.data ?? []).map((m) => {
                const mRole = (m.role ?? "").toUpperCase();
                const isSelf = m.userId === user?.id;
                // Owner role is immutable here (transfer only). Admins can manage
                // non-owners; owners can manage anyone except themselves.
                const canEditThis = canManage && mRole !== "OWNER" && (!isOwner || !isSelf);
                return (
                  <li key={m.userId} className="flex items-center gap-2.5 py-2">
                    <UserAvatar user={{ id: m.user.id, name: m.user.name, avatarUrl: m.user.image ?? null }} size={28} />
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm">
                        {m.user.name}
                        {isSelf ? <span className="ml-1 text-xs text-muted-foreground">(you)</span> : null}
                      </p>
                      <p className="truncate text-xs text-muted-foreground">{m.user.email}</p>
                    </div>
                    {canEditThis ? (
                      <select
                        className="rounded-md border border-input bg-background px-1.5 py-1 text-xs outline-none"
                        value={mRole}
                        disabled={updateRole.isPending}
                        onChange={(e) => changeRole(m.userId, e.target.value)}
                        aria-label={`Role for ${m.user.name}`}
                      >
                        {ASSIGNABLE_ROLES.map((r) => (
                          <option key={r} value={r}>
                            {roleLabel(r)}
                          </option>
                        ))}
                      </select>
                    ) : (
                      <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">{roleLabel(mRole)}</span>
                    )}
                    {canEditThis && (
                      <button
                        type="button"
                        className="rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
                        onClick={() => removeMember(m)}
                        disabled={remove.isPending}
                        aria-label={`Remove ${m.user.name}`}
                      >
                        <Trash2 className="size-4" />
                      </button>
                    )}
                  </li>
                );
              })}
            </ul>
          </Section>
        </div>
      )}
    </SettingsShell>
  );
}